<template>
    <div class="line1">
        <div id="line1" class="" style="width: 90%;height:450px;"></div>
    </div>
</template>

<script>
    import echarts from 'echarts/lib/echarts';
    // 引入柱状图
    import 'echarts/lib/chart/bar';
    import 'echarts/lib/chart/line';
    import 'echarts/lib/component/title';
    import 'echarts/lib/component/legend';
    import 'echarts/lib/component/toolbox';
    import 'echarts/lib/component/markPoint';
    import 'echarts/lib/component/tooltip';
    export default {
        data(){
            return {
                option: {},
                myChart: {},
                graph: {},
            }

        },
        mounted(){
            this.myChart = echarts.init(document.getElementById('line1'));
            this.initData();
        },

        methods: {

            initData() {
                this.$axios.get("'http://localhost:8002/static/idol.json'")


                $.getJSON('../assets/123.json', function (graph) {
                    this.myChart.hideLoading();

                    this.option = {
                        tooltip: {},
                        legend: [{
                            data: graph.categories.map(function (a) {
                                return a.name;
                            })
                        }],
                        series: [
                            {
                                name: 'Les Miserables',
                                type: 'graph',
                                layout: 'none',
                                data: graph.nodes,
                                links: graph.links,
                                categories: graph.categories,
                                roam: true,
                                label: {
                                    show: true,
                                    position: 'right',
                                    formatter: '{b}'
                                },
                                labelLayout: {
                                    hideOverlap: true
                                },
                                scaleLimit: {
                                    min: 0.4,
                                    max: 2
                                },
                                lineStyle: {
                                    color: 'source',
                                    curveness: 0.3
                                }
                            }
                        ]
                    };

                    this.myChart.setOption(this.option);
                });

                this.option && this.myChart.setOption(this.option);






            }


        },
        watch: {
            sevenDate: function (){
                this.initData()
            },
            sevenDay: function (){
                this.initData()
            }
        }
    }
</script>

<style lang="less">
	@import '../style/mixin';
    .line1{
        display: flex;
        justify-content: center;
    }
</style>
